<template>
  <div>
    <el-drawer
      v-model="showSecurityIssues"
      title="修改手机号"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <el-form
        ref="phoneFormRef"
        :model="phoneForm"
        :rules="phoneRules"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="手机号：" prop="phone">
            <el-input v-model="phoneForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="验证码：" prop="phoneCode">
          <div class="row">
            <el-input v-model="phoneForm.phoneCode" placeholder="请输入验证码"></el-input>
            <el-button>发送验证码</el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="onSubmit(phoneFormRef)">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
import { updatePhone } from "@/api/personal/info/baseInfo"
import { ElMessage } from "element-plus";

const props = defineProps({
  showDrawer: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['update:showDrawer'])
const showSecurityIssues = computed(()=>{return props.showDrawer})
const phoneRules = ref({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  phoneCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
})
// 修改密码
const phoneFormRef = ref()
const defaultPhoneForm = {
  phone: '',
  phoneCode: '',
}
const phoneForm = ref(structuredClone(defaultPhoneForm))
// 提交
const onSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      // 新增
      updatePhone(phoneForm.value).then(res=>{
        if(res.code == 20000){
          ElMessage({
            showClose: true,
            message: '操作成功',
            type: 'success',
          })
          handleClose()
          phoneForm.value = structuredClone(defaultPhoneForm)
        }
      })
    }
  })
}

const handleClose = () => {
  emits('update:showDrawer',false)
}
const cancelClick = () => {
  emits('update:showDrawer',false)
}
</script>
<style scoped lang='scss'>
.el-select{
  width: 100%;
}
.row{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>